<template>
	<div class="edit">
		<!-- 新建按钮 -->
		<Button type="primary" @click="creatArticalModal=true" style="margin: 0 0 20px;">新建商品</Button>
		<!-- 表格及分页 -->
		<Table :columns="columns" :data="tableData"></Table>
		<div class="center">
			<div class="pageBox">
				<Page :total="count" show-total :page-size="pageSize" @on-change="handlePage" />
			</div>
		</div>
		<!-- 修改面版 -->
		<Modal v-model="editArticalModal" title="修改商品" @on-ok="editArtical" @on-cancel="cancel" width="800">
			<Form :label-width="80">
				<FormItem label="商品分类">
					<Cascader :data="CascaderData" v-model="EditCascader"></Cascader>
				</FormItem>
				<FormItem label="商品名称">
					<Input v-model="editTitle" placeholder="请输入商品名称"></Input>
				</FormItem>
				<FormItem label="商品价格">
					<Input v-model="editPrice" placeholder="请输入商品价格"></Input>
				</FormItem>
				<FormItem label="商品版本">
					<Input v-model="editProductEdition" placeholder="请输入商品版本"></Input>
				</FormItem>
				<FormItem label="商品简介">
					<Input v-model="editTntroduction" placeholder="请输入商品简介"></Input>
				</FormItem>
				<FormItem label="发布时间">
					<DatePicker type="datetime" placeholder="Select date" @on-change="editSelectDate" v-model="editPubDate"></DatePicker>
				</FormItem>
			</Form>
			<div class="editBox ivu-form">
				<img :src="cover" alt="封面" v-show="cover!=''" style="width:100px;height:100px;vertical-align: bottom;">
				<label class="ivu-form-item-label" style="width: 80px;">商品封面</label>
				<Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :show-upload-list=false :on-success="showCover" :headers="headers">
					<Button icon="ios-cloud-upload-outline">{{text}}</Button>
				</Upload>
			</div>
			<div class="editBox ivu-form" style="clear: both;">
				<label class="ivu-form-item-label" style="width: 80px;">商品介绍</label>
				<div style="margin-left: 80px;">
					<div id="editModel" style="text-align:left"></div>
				</div>
			</div>
		</Modal>
		<!-- 删除面板 -->
		<Modal v-model="deleteArticalModal" title="删除版块" @on-ok="deleteArtical" @on-cancel="cancel">
			是否删除该数据?
		</Modal>
		<Modal v-model="examineArticalModal" title="审核版块" @on-ok="examineArtical" @on-cancel="cancel">
			是否审核该数据?
		</Modal>
		<!-- 新建面板 -->
		<Modal v-model="creatArticalModal" title="商品提交" @on-ok="getContent" @on-cancel="cancel" width="800">
			<Form :label-width="80">
				<FormItem label="商品分类">
					<Cascader :data="CascaderData" v-model="Cascader"></Cascader>
				</FormItem>
				<FormItem label="商品名称">
					<Input v-model="title" placeholder="请输入商品名称"></Input>
				</FormItem>
				<FormItem label="商品价格">
					<Input v-model="price" placeholder="请输入商品价格"></Input>
				</FormItem>
				<FormItem label="商品版本">
					<Input v-model="productEdition" placeholder="请输入商品版本"></Input>
				</FormItem>
				<FormItem label="商品简介">
					<Input v-model="introduction" placeholder="请输入商品简介"></Input>
				</FormItem>
				<FormItem label="发布时间">
					<DatePicker type="datetime" placeholder="Select date" @on-change="selectDate" v-model="pubDate"></DatePicker>
				</FormItem>
			</Form>
			<div class="editBox ivu-form">
				<img :src="cover" alt="封面" v-show="cover!=''" style="width:100px;height:100px;vertical-align: bottom;">
				<label class="ivu-form-item-label" style="width: 80px;">商品封面</label>
				<Upload :action="uploadUrl" :format="['jpg','jpeg','png']" :show-upload-list=false :on-success="showCover" :headers="headers">
					<Button icon="ios-cloud-upload-outline">{{text}}</Button>
				</Upload>
			</div>
			<div class="editBox ivu-form" style="clear: both;">
				<label class="ivu-form-item-label" style="width: 80px;">商品介绍</label>
				<div style="margin-left: 80px;">
					<div id="editorElem" style="text-align:left"></div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import E from 'wangeditor'
	import Util from '@/utils/index'
	export default {
		name: 'editor',
		data () {
			return {
				content: '', // 编辑器内容
				title: '', // 标题
				// 价格
				price: '',
				// 版本
				productEdition: '',
				editor: '', // 编辑器
				editEditor: '', // 修改编辑器
				// 商品列表
				articalList: [],
				// 表头
				columns: [{
						title: '商品id',
						key: 'id'
					},
					{
						title: '版块',
						key: 'forum',
						render: (h, params) => {
							if (params.row.forum !== null) {
								return h('span', this.articalList[params.row.forum - 1])
							}
						}
					},
					{
						title: '商品类型',
						key: 'artType',
						render: (h, params) => {
							if (params.row.artType !== null) {
								return h('span', this.articalList[params.row.artType - 1])
							}
						}
					},
					{
						title: '商品名称',
						key: 'title'
					},
					// {
					// 	title: '商品价格',
					// 	key: 'price'
					// },
					// {
					// 	title: '商品版本',
					// 	key: 'edition'
					// },
					{
						title: '简介',
						key: 'introduction',
						render: (h, params) => {
							return h('div', {
									style: {
										height: '18px',
										whiteSpace: 'nowrap'
									}
								},
								params.row.introduction
							)
						}
					},
					{
						title: '封面',
						key: 'cover',
						render: (h, params) => {
							return h('img', {
								style: {
									height: '25px'
								},
								attrs: {
									src: params.row.cover
								}
							})
						}
					},
					{
						title: '审核状态',
						key: 'state',
						render: (h, params) => {
							if (params.row.state === 0) {
								return h('span', '已审核')
							} else {
								return h('span', '未审核')
							}
						}
					},
					{
						title: '发布时间',
						key: 'pubDate',
						render: (h, params) => {
							return h('span', params.row.pubDate.replace(/T/g, ' '))
						}
					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						render: (h, params) => {
							if (params.row.state === 0) {
								return h('div', [
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginLeft: '5px',
											marginBottom: '5px'
										},
										on: {
											click: () => {
												this.show(params.row)
											}
										}
									}, '修改'),
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginLeft: '5px',
											marginBottom: '5px'
										},
										on: {
											click: () => {
												this.remove(params.row)
											}
										}
									}, '删除'),
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										attrs: {
											disabled: 'disabled'
										},
										style: {
											marginLeft: '5px',
											marginBottom: '5px'
										},
										on: {
											click: () => {
												this.examineArticalModal = true
												this.examineId = params.row.id
											}
										}
									}, '审核')
								])
							} else {
								return h('div', [
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginLeft: '5px',
											marginBottom: '5px'
										},
										on: {
											click: () => {
												this.show(params.row)
											}
										}
									}, '修改'),
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginLeft: '5px',
											marginBottom: '5px'
										},
										on: {
											click: () => {
												this.remove(params.row)
											}
										}
									}, '删除'),
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginLeft: '5px',
											marginBottom: '5px'
										},
										on: {
											click: () => {
												this.examineArticalModal = true
												this.examineId = params.row.id
											}
										}
									}, '审核')
								])
							}
						}
					}
				],
				// 表格数据
				tableData: [],
				// 当前页
				page: 1,
				// 每页数量
				pageSize: 5,
				// 总数
				count: 0,
				// 新建面板是否展示
				creatArticalModal: false,
				// 修改面板是否展示
				editArticalModal: false,
				// 商品简介
				introduction: '',
				// 商品封面
				cover: '',
				// 上传按钮文字
				text: '上传封面',
				// 删除面板是否展示
				deleteArticalModal: false,
				// 修改商品标题
				editTitle: '',
				// 修改商品价格
				editPrice: '',
				// 修改商品版本
				editProductEdition: '',
				// 修改商品简介
				editTntroduction: '',
				// 修改内容
				editContent: '',
				// 删除id
				deleteId: 0,
				// 修改id
				editId: 0,
				// 审核id
				examineId: 0,
				// 审核面板是否展示
				examineArticalModal: false,
				// 发布日期
				pubDate: '',
				// 修改日期
				editPubDate: '',
				// 级联数据列表
				CascaderData: [],
				// 修改级联返回数据
				EditCascader: [],
				// 商品分类
				Cascader: [],
				upFile: {},
				// 上传地址
				uploadUrl: sessionStorage.uploadUrl + '/files/v2/upload',
				// 商品id
				productId: '',
				headers: {}
			}
		},
		methods: {
			// 商品发布
			getContent () {
				var forum, artType, insideType, solutionType
				if (this.Cascader.length === 1) {
					forum = this.Cascader[0]
					artType = ''
					insideType = ''
					solutionType = ''
				}
				if (this.Cascader.length === 2) {
					forum = this.Cascader[0]
					artType = this.Cascader[1]
					insideType = ''
					solutionType = ''
				}
				this.$api.post(0, '/art/v2/article/product', {
					artType: artType,
					insideType: insideType,
					forum: forum,
					solutionType: solutionType,
					author: this.user.id,
					title: this.title,
					edition: this.productEdition,
					productPrice: this.price,
					introduction: this.introduction,
					content: this.content,
					cover: this.cover,
					pubDate: this.pubDate
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('提交成功')
						this.getList()
						this.getArticalList()
					} else {
						this.$Message.error('提交失败')
					}
					this.cancel()
				})
			},
			// 渲染编辑器
			createEdit () {
				this.editor = new E('#editorElem')
				this.editor.customConfig.uploadImgShowBase64 = true
				this.editor.customConfig.menus = [
					'head',
					'bold',
					'italic',
					'underline',
					'strikeThrough',
					'foreColor',
					'backColor',
					'link',
					'list',
					'justify',
					'image',
					'video',
					'code',
					'undo',
					'redo'
				]
				this.editor.customConfig.onchange = (html) => {
					this.content = html
				}
				this.editor.create()
			},
			// 渲染修改编辑器
			createEdit2 () {
				this.editEditor = new E('#editModel')
				this.editEditor.customConfig.uploadImgShowBase64 = true
				this.editEditor.customConfig.menus = [
					'head',
					'bold',
					'italic',
					'underline',
					'strikeThrough',
					'foreColor',
					'backColor',
					'link',
					'list',
					'justify',
					'image',
					'video',
					'code',
					'undo',
					'redo'
				]
				this.editEditor.customConfig.onchange = (html) => {
					this.editContent = html
				}
				this.editEditor.create()
			},
			// 获取商品列表
			getList () {
				this.$api.get(0, '/art/v2/article/page?forum=8&page=' + this.page + '&limit=' + this.pageSize, {}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.data
						this.count = r.data.data.total
						// for (let p = 0; p < this.tableData.length; p++) {
						// 	if (this.tableData[p].productId !== null && this.tableData[p].productId !== '' && this.tableData[p].productId !==
						// 		undefined) {
						// 		this.$api.get(0, '/shop/v2/product?pId=' + this.tableData[p].productId, {}, r => {
						// 			if (r.data.code === 0) {
						// 				console.log(r.data.data)
						// 				this.$set(this.tableData[p], 'price', r.data.data.productPrice)
						// 				this.$set(this.tableData[p], 'edition', r.data.data.edition)
						// 			}
						// 		})
						// 	} else {
						// 		this.$set(this.tableData[p], 'price', '')
						// 		this.$set(this.tableData[p], 'edition', '')
						// 	}
						// }
					}
				})
			},
			// 页面跳转
			handlePage (page) {
				this.page = page
				this.getList()
			},
			// 点击‘修改’
			show (index) {
				if (index.forum !== null) {
					if (index.artType !== null) {
						if (index.insideType !== null) {
							if (index.solutionType !== null) {
								this.EditCascader = [index.forum, index.artType, index.insideType, index.solutionType]
							} else {
								this.EditCascader = [index.forum, index.artType, index.insideType]
							}
						} else {
							this.EditCascader = [index.forum, index.artType]
						}
					} else {
						this.EditCascader = [index.forum]
					}
				}
				this.editArticalModal = true
				this.editId = index.id
				this.editTitle = index.title
				this.editTntroduction = index.introduction
				this.$api.get(0, '/art/v2/article?id=' + index.id, {}, r => {
					if (r.data.code === 0) {
						this.editContent = r.data.data.content
						this.editEditor.txt.html(r.data.data.content)
					}
				})
				this.editPubDate = index.pubDate.replace(/T/g, ' ')
				console.log(index)
				if (index.productId !== null && index.productId !== '' && index.productId !== undefined) {
					this.productId = index.productId
					this.$api.get(0, '/shop/v2/product?pId=' + index.productId, {}, r => {
						if (r.data.code === 0) {
							this.editPrice = r.data.data.productPrice
							this.editProductEdition = r.data.data.edition
						}
					})
				}
				if (index.cover !== '' && index.cover !== null && index.cover !== undefined) {
					this.cover = index.cover
					this.text = '修改封面'
				}
			},
			// 点击删除
			remove (index) {
				this.deleteId = index.id
				this.deleteArticalModal = true
			},
			// 修改商品
			editArtical () {
				var forum, artType, insideType, solutionType
				if (this.EditCascader.length === 1) {
					forum = this.EditCascader[0]
					artType = ''
					insideType = ''
					solutionType = ''
				}
				if (this.EditCascader.length === 2) {
					forum = this.EditCascader[0]
					artType = this.EditCascader[1]
					insideType = ''
					solutionType = ''
				}
				this.$api.put(0, '/art/v2/article', {
					id: this.editId,
					artType: artType,
					insideType: insideType,
					forum: forum,
					solutionType: solutionType,
					author: this.user.id,
					title: this.editTitle,
					productPrice: this.editPrice,
					edition: this.editProductEdition,
					introduction: this.editTntroduction,
					content: this.editContent,
					cover: this.cover,
					pubDate: this.formatDate(this.editPubDate)
				}, r => {
					if (r.data.code === 0) {
						if (this.productId !== null && this.productId !== '' && this.productId !== undefined) {
							this.$api.put(0, '/shop/product/edit', {
								id: this.productId,
								productname: this.editTitle,
								productPrice: this.editPrice,
								edition: this.editProductEdition
							}, r => {
								if (r.data.code === 0) {
									this.$Message.success('修改成功')
									this.getList()
									this.getArticalList()
								} else {
									this.$Message.error('修改失败')
								}
								this.cancel()
							})
						}
					} else {
						this.$Message.error('修改失败')
					}
					this.cancel()
				})
			},
			// 退出时的清空
			cancel () {
				this.title = ''
				this.editor.txt.html('<p></p>')
				this.content = ''
				this.introduction = ''
				this.cover = ''
				this.text = '上传封面'
				this.deleteId = 0
				this.editTitle = ''
				this.editTntroduction = ''
				this.editContent = ''
				this.editEditor.txt.html('<p></p>')
				this.editId = 0
				this.examineId = 0
				this.pubDate = ''
				this.editPubDate = ''
				this.Cascader = []
				this.EditCascader = []
				this.articalList = []
				this.editPrice = ''
				this.editProductEdition = ''
				this.price = ''
				this.productEdition = ''
				this.productId = ''
				this.getList()
				this.getArticalList()
			},
			// 封面上传成功回调
			showCover (response) {
				this.cover = response.data
				this.text = '修改封面'
			},
			// 删除商品
			deleteArtical () {
				this.$api.delete(0, '/art/v2/article?id=' + this.deleteId, {}, r => {
					if (r.data.code === 0) {
						this.$Message.success('删除成功')
						this.getList()
					} else {
						this.$Message.error('删除失败')
					}
					this.cancel()
				})
			},
			// 审核商品
			examineArtical () {
				this.$api.put(0, '/art/v2/article/state', {
					id: this.examineId
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('审核成功')
						this.getList()
					} else {
						this.$Message.error('审核失败')
					}
					this.cancel()
				})
			},
			// 选择日期
			selectDate (date) {
				this.pubDate = this.formatDate(date)
			},
			editSelectDate (date) {
				this.editPubDate = this.formatDate(date)
			},
			formatDate (date) {
				var date1 = new Date(date).toString().replace(/-/g, '/')
				var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
				return date2
			},
			// 获取列表所需转换数组
			getArticalList () {
				this.$api.get(0, '/art/v2/baseData/list', {}, r => {
					if (r.data.code === 0) {
						for (let i = 0; i < r.data.data.length; i++) {
							this.articalList.push(r.data.data[i].itemName)
						}
					}
				})
			},
			getFile (file) {
			},
			// 获取商品价格
			getPrice (id) {
				this.$api.get(0, '/shop/product/find?id=' + id, {}, r => {
					if (r.data.code === 0) {
						return r.data.data.productPrice
					}
				})
			},
			getEdition (id) {
				this.$api.get(0, '/shop/product/find?id=' + id, {}, r => {
					if (r.data.code === 0) {
						return r.data.data.edition
					}
				})
			}
		},
		mounted () {
			this.user = JSON.parse(sessionStorage.user)
			this.createEdit()
			this.createEdit2()
			this.getList()
			this.getArticalList()
			this.headers = {
				'Authorization': Util.getToken()
			}
			// 获取商品类型
			this.$api.get(0, '/art/v2/baseData/list?id=8', {}, r => {
				if (r.data.code === 0) {
					let str = JSON.stringify(r.data.data).replace(/id/g, 'value').replace(/itemName/g, 'label')
					this.CascaderData = JSON.parse(str)
					// 获取商品大类
					this.$api.get(0, '/art/v2/baseData/list?name=' + '文章大类', {}, r => {
						if (r.data.code === 0) {
							var str = JSON.stringify(r.data.data).replace(/id/g, 'value').replace(/itemName/g, 'label')
							var date = JSON.parse(str)
							// 为级联列表的版块每一项添加children项
							for (let i = 0; i < date.length; i++) {
								this.$set(date[i], 'children', [])
							}
							// 当商品大类parentId与版块id相当传入版块的children
							for (var a = 0; a < this.CascaderData.length; a++) {
								this.$set(this.CascaderData[a], 'children', [])
								for (var b = 0; b < date.length; b++) {
									if (date[b].parentId === this.CascaderData[a].value) {
										this.CascaderData[a].children.push(date[b])
									}
								}
							}
						}
					})
				}
			})
		}
	}
</script>

<style scoped>
	.editBox button {
		padding: 10px 12px 10px 12px;
	}

	.editBox {
		margin-bottom: 20px;
	}

	.ivu-upload {
		display: inline-block;
	}
</style>
